import React from 'react'
import { message } from 'antd';
import { usePartContext } from '../context/PartContext';
import Header from './Header';

const Collect = (props) => {
	const {state,dispatch} = usePartContext();
	const cancel = (good)=>{
		dispatch({type:"cancel",id:good.id})
		message.success('取消成功',0.5)
	}
  	return (
		<div className='collect'>
			<Header history={props.history}/>
			<div className='col-goods-list'>
				{
					!state.colGoods || state.colGoods.map(item=>{
						return(
							<div key={item.id} className="goods">
								<img src={item.img}/>
								<p>{item.title}</p>
								<p>{item.price}</p>
								<button onClick={()=>cancel(item)}>取消收藏</button>
							</div>
						)
					})
				}
			</div>
		</div>
	)
}
export default Collect;